<style lang="less">
	.content {
		text-align: center;
	}
   .main{
   	padding: 15upx 30upx;
	background: #f6f6f6;
   }
   .main_list{
		background: #FFFFFF;
		margin-bottom: 15upx;
		border-radius:11upx;
		.main-list-top{
			padding: 30upx;
			overflow: hidden;
			display: flex;
			.main-list-top-fl{
				margin-right: 30upx;
				.touxiang{
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
				}
			}
			.main-list-top-right{
				flex: 1;
			}
			.main-list-top-fr{
				display: flex;
				justify-content: space-between;
				.name{
					flex: 1;
					text-align: left;
					font-size:30upx;
					font-weight:bold;
					color:rgba(51,51,51,1);
					line-height:36upx;
					word-break: break-all;
					margin-right: 16upx;
				}
				.main_list_tuan{
					font-size:22upx;
					font-weight:500;
					color:rgba(153,153,153,1);
					line-height:26upx;
				}
				.memberTyp{
					margin-top: 20upx;
					display: inline-block;
					border: 2upx solid #DBC291;
					border-radius: 22upx;
					font-size: 20upx;
					font-weight: bold;
					line-height: 20upx;
					color: #DBC291;
					padding: 8upx 16upx;
				}
				// .vipclass{
				// 	width: 250upx;
				// 	height: auto;
				// 	display: block;
				// 	margin-top: 20upx;
				// }
				
				.main_list_btn{
					margin-top: 20upx;
					display: flex;
				}
				.btns_item{
					margin-left: 16upx;
					border: 1upx solid #333333;
					border-radius: 30upx;
					font-size:20upx;
					font-family:'DINCond';
					font-weight:400;
					color: #333333;
					line-height:20upx;
					padding: 8upx 16upx 8upx 12upx;
					&:first-of-type{
						margin-left: 0;
					}
				}
				.phone{
					background: url('../../static/img/h5TeamPhone.png') no-repeat 12upx center/ 16upx 20upx;
					padding-left: 36upx;
				}
				.wexin{
					background: url('../../static/img/h5TeamPhoneWeixin.png') no-repeat 12upx center/ 24upx 20upx;
					padding-left: 46upx;
				}
			}
		}
		.main-list-bot{
			overflow: hidden;
			display: flex;
			border-top:2upx solid #ededed;
			.main-list-bot-for{
				// float: left;
				width: 25%;
				border-right:2upx solid #ededed;
				box-sizing: border-box;
				padding: 35upx 0;
				&:nth-of-type(4n){
					border-right: none;
				}
				.progress-pos{
					position: relative;
					margin: 15upx 8upx;
					progress{
						border-radius: 22upx;
						width: 150upx;
						overflow: hidden;
					}
					.progress-meber{
						position: absolute;
						left: 0;
						top: 0;
						line-height:32upx;
						border-radius:16upx;
						font-size:16upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(51,51,51,1);
					}
				}
				.point{
					line-height:32upx;
					background:rgba(219,194,145,1);
					border-radius:16upx;
					font-size:20upx;
					font-family:'DINCond';
					font-weight:400;
					margin: 15upx 8upx;
					color:rgba(51,51,51,1);
				}
				.zuigao{
					font-size:24upx;
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:48upx
				}
				.num{
					font-size:38upx;
					font-family: 'DINCond';
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:48upx
				}
				.name{
					font-size:24upx;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:29upx;
					margin-top: 20upx;
				}
			}
			.main-list-bot-for.tess{
				position: relative;
				.pointRed{
					position: absolute;
					top: 15upx;
					left: 0;
					width: 100%;
					text-align: center;
					font-size: 18upx;
					font-weight: 400;
					color: #E93246;
					line-height: 24upx;
				}
			}
			// .main-list-bot-dj{
			// 	float: left;
			// 	width: 48%;
			// 	box-sizing: border-box;
			// 	padding: 35upx 0;
			// 	.num.memberImage{
			// 		height: 50upx;
			// 		background: url('https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/images/xmsj_icon1%402x.png') no-repeat center center;
			// 		background-size: 36upx;
			// 	}
			// 	.num{
			// 		font-size:38upx;
			// 		font-family: 'DINCond';
			// 		font-weight:400;
			// 		color:rgba(51,51,51,1);
			// 		line-height:48upx;
			// 		text{
			// 			color: #D9C091;
			// 		}
			// 	}
			// 	.num.tes{
			// 		height: 50upx;
			// 		background: url('https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/images/xmdj_levels%402x.png') no-repeat center center;
			// 		background-size: 50upx;
			// 	}
			// 	.name{
			// 		font-size:24upx;
			// 		font-weight:500;
			// 		color:rgba(51,51,51,1);
			// 		line-height:29upx;
			// 		margin-top: 20upx;
			// 	}
			// }
		}
   }
   .content_main{
   	   margin-top: 190upx;
   }
   .uni-form-item{
	   padding-top: 20upx;
   }
   .uni-column{
	  position: fixed;
	   top: 0;
	   left: 0;
	   width: 100%;
	   background: #FFFFFF;
	   z-index: 100;
   }
   .with-fun{
	   width:calc(100% - 242upx);
	   border: 1px solid #CCCCCC;
	   border-radius: 10upx;
	   margin-left: 30upx;
	   padding: 10upx;
   }
   .uni-input{
	   padding: 0;
	   height: 40upx;
	   line-height: 40upx;
	   text-align: left;
	   box-sizing: border-box;
	   padding: 0 20upx;
   }
   // .uni-form-item .with-fun .uni-icon{
	  //  height: 40upx;
	  //  line-height: 40upx;
   // }
   .uni-input-input{
	    line-height: 40upx;
   }
   .sousuo{
	   position: absolute;
	   right: 30upx;
	   top: 20upx;
	   width:142upx;
	   background:rgba(50,47,44,1);
	   padding: 7upx 0;
	   border-radius: 4upx;
	   image{
		   width: 32upx;
		   height: 32upx;
	   }
   }
   .search_close{
	   width: 34upx;
	   height: 34upx;
	   margin-right: 12upx;
   }
   // .uni-icon-clear,
   // .uni-icon-eye {
   // 	color: #999;
   // }
   .time{
	   overflow: hidden;
	   margin-top: 40upx;
	   -moz-box-shadow: 0upx 10upx 6upx #eee;
		-webkit-box-shadow: 0upx 10upx 6upx #eee;
		box-shadow: 0upx 10upx 6upx #eee;
		image{
			width: 20upx;
			margin-left: 10upx;
		}

   }
   .time view{
	   float: left;
	   width: 50%;
	   text-align: center;
	   font-size:26upx;
		font-weight:bold;
		color:rgba(51,51,51,1);
   }
   .select{
   	   width: 80%;
   	   display: block;
   	   margin: 10upx auto;
   	   outline: none;
   }
   .select option{
   	    outline: none;
   		display: inline-block;
   		width: 100%;
   }
   .zhao{
	   position: fixed;
	   left: 0;
	   top: 0;
	   bottom: 0;
	   right: 0;
	   background: #000000;
	   opacity: 0.4;
	   z-index: 999;
   }
   .popup{
	   width: 100%;
	   position: fixed;
	   bottom: 0;
	   left: 0;
	   z-index: 1000;
   }
   .popup_phone{
	   padding: 0 30upx 50upx;
	   .popup_phone_list{
		   width: 100%;
		   margin-top: 20upx;
		   padding: 36upx 0;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   background-color: #FFFFFF;
		   border-radius: 46upx;
		   .popup_phone_list_img{
			   width: 16upx;
			   height: 22upx;
			   margin-right: 20upx;
		   }
		   text{
			   font-size: 26upx;
			   font-weight: 600;
			   line-height: 26upx;
			   font-family: "DINCond";
			   color: #0099CC;
		   }
	   }
   }
</style>
<template>
	<view class="content">
		 <view class="uni-form-item uni-column">
		 	<view class="with-fun">
		 		<input class="uni-input" placeholder="请输入搜索内容" maxlength="20" :value="inputClearValue" @input="clearInput" />
		 		
				<image src="https://static.xpandago.net/wechat/images/search_closed%402x.png" class="search_close" v-if="showClearIcon" @click="clearIcon" mode="widthFix"></image>
				<!-- <view class="uni-icon uni-icon-clear" ></view> -->
		 	</view>
			<view class="sousuo" @click="seek">
				<image src="/static/img/search_iconss@2x.png" mode="widthFix"></image>
			</view>
			<view class="time">
				<view class="time_select">
					<select class="select" v-model="indexId" @change="getCouponSelected">
						<option v-for="(x,i) in shuju" v-bind:value="x.indexId">{{x.name}}</option>
					</select>
				</view>
				<view class="time_select">
					<select class="select" v-model="indexTime" @change="getCouponSelectedOne">
						<option v-for="(x,i) in sortStr" v-bind:value="x.indexTime">{{x.name}}</option>
					</select>
				</view>
				<!-- <view class="timeZc" @tap="timeZc">注册时间
					<image src="/static/img/arrowdown_icons@2x.png" v-if="sidxShou == false" mode="widthFix"></image>
					<image src="/static/img/arrowup_icons@2x.png" v-else="sidxShou == true" mode="widthFix"></image>
				</view>
				<view class="timeFs" @tap="timeFs">粉丝总数
					<image src="/static/img/arrowdown_icons@2x.png" v-if="orderShou == false" mode="widthFix"></image>
					<image src="/static/img/arrowup_icons@2x.png" v-else="orderShou == true" mode="widthFix"></image>
				</view> -->
			</view>
		 </view>
		 <view class="content_main">
			<view class="main">
				<view class="main_for">
					<view class="main_list" v-for="(itme,i) in list">
						<view class="main-list-top">
							<view class="main-list-top-fl">
								<image v-if="itme.headIco!='' && itme.headIco!=null && itme.headIco!=undefined" :src= "'https://static.xpandago.net'+'/'+itme.headIco" class="touxiang"></image>
								<image v-else src='https://static.xpandago.net/wechat/images/logo.png' class="touxiang"></image>
							</view>
							<view class="main-list-top-right">
								<view class="main-list-top-fr">
									<view class="name">{{itme.username}}</view>
									<view class="main_list_tuan"  @tap="fans(itme.userId)">团队信息 ></view>
									<!-- <image v-if="itme.memberImage!='' && itme.memberImage!=null && itme.memberImage!=undefined" :src= "'https://static.xpandago.net'+itme.memberImage" class="vipclass" mode="widthFix"></image> -->
								</view>
								<view class="main-list-top-fr">
									<view v-if="itme.memberTypeStr!='' && itme.memberTypeStr!=null && itme.memberTypeStr!=undefined" class="memberTyp">{{itme.memberTypeStr}}</view>
									<view class="main_list_btn">
										<block v-if="itme.mobile != '' && itme.mobile != null">
											<view class="btns_item phone" @tap="openpopupPhone(itme.areaCode,itme.mobile)">电话</view>
											<view class="btns_item wexin" v-if="fansFlag == true" @tap="openWinXin(itme.mobile)">微信</view>
										</block>
										<!-- <view class="btns_item" v-if="itme.memberType == 'middle' || itme.memberType == 'big'">发起会话</view> -->
									</view>
								</view>
							</view>
						</view>
						<view class="main-list-bot">
							<view class="main-list-bot-for">
								<view class="num">{{itme.teamNum}}</view>
								<view class="name">粉丝总数</view>
							</view>
							<view class="main-list-bot-for">
								<view class="num">{{itme.thisMonthNum}}</view>
								<view class="name">本月新增粉丝</view>
							</view>
							<view class="main-list-bot-for tess">
								<view class="pointRed" v-if="itme.promotionNeedPoint != '' && itme.promotionNeedPoint != null">{{itme.promotionNeedPoint}}</view>
								<view class="point">{{itme.availablePoint}}</view>
								<view class="name">积分余额</view>
							</view>
							<!-- <view class="main-list-bot-for" v-if="itme.memberType == 'big'">
								<view class="zuigao">最高等级</view>
								<view class="name">累计业绩</view>
							</view> -->
							<view class="main-list-bot-for">
								<view class="progress-pos">
									<progress :percent="itme.percentage" activeColor="#DBC291" stroke-width="16" backgroundColor="rgba(219,194,145,0.4)"/>
									<view class="progress-meber">¥ {{itme.oneselfShipment}} / ¥ {{itme.promotionNeedAmount}}</view>
								</view>
								<view class="name">累计业绩</view>
							</view>
							
							<!-- <view class="main-list-bot-dj" v-if="itme.memberType == 'big' && itme.star<=0">
								<view class="num tes"></view>
								<view class="name" >当前等级：熊猫大将</view>
							</view>
							<view class="main-list-bot-dj"  v-else-if="itme.memberType === 'big' && itme.star>0">
								<view class="num memberImage"></view>
								<view class="name" >当前等级：熊猫上将</view>
							</view>
							<view class="main-list-bot-dj"  v-else-if="itme.memberType == 'middle'">
								<view class="num">¥ {{itme.promotionAmount}}<text>/¥ {{itme.promotionNeedAmount}}</text></view>
								<view class="name" >下一等级：熊猫大将</view>
							</view>
							<view class="main-list-bot-dj"  v-else-if="itme.memberType == 'small'">
								<view class="num">¥ {{itme.promotionAmount}}<text>/¥ {{itme.promotionNeedAmount}}</text></view>
								<view class="name" >下一等级：熊猫中将</view>
							</view>
							<view class="main-list-bot-dj"  v-else-if="itme.memberType == 'general'">
								<view class="num">¥ {{itme.promotionAmount}}<text>/¥ {{itme.promotionNeedAmount}}</text></view>
								<view class="name" >下一等级：熊猫小将</view>
							</view> -->
						</view>
						<view class="main-list-bot">
							<view class="main-list-bot-for">
								<view class="num">{{itme.teamSum}}</view>
								<view class="name">本月团队业绩</view>
							</view>
							<view class="main-list-bot-for">
								<view class="num">{{itme.cjMoney}}</view>
								<view class="name">本月差价收益</view>
							</view>
							<view class="main-list-bot-for">
								<view class="num">{{itme.allMoney}}</view>
								<view class="name">本月总收益</view>
							</view>
							<navigator open-type="navigate" :url="'/pages/browse/browse?otherUserId=' + itme.userId" class="main-list-bot-for">
								<view class="name">浏览记录></view>
							</navigator>
						</view>
					</view>
				</view>
				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
			</view>
		</view>
		<view class="zhao" v-if="hidden"></view>
		<view class="popup" v-if="hidden">
			<view class="popup_phone" v-if="popupFlag == 1">
				<view class="popup_phone_list" @tap="openPhone">
					<image src='https://static.xpandago.net/wechat/images/h5TeamPhone.png' class="popup_phone_list_img"></image>
					<text>呼叫 {{mobile}}</text>
				</view>
				<view class="popup_phone_list" @tap="cancelPhone">
					<text>取消</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import webView from '@/common/webView'
	export default {
		data() {
			return {
				fansFlag:'', // 判断是xpa   公众号
				// areaCode:'',
				mobile:'',
				popupFlag: 1,
				hidden: false,
				list:[],
				loadMoreText: "加载中...",
				showLoadMore: true,
				inputClearValue: '',
				showClearIcon: false,
				totalPage:'',//总页数
				page:1,
				memberType:'',//选择级别
				sortStrType:'timeDesc',
				shuju:[
					{name:"全部等级",indexId: ''},
					{name:"联合合伙人",indexId: 'jointPartner'},
					{name:"名人堂",indexId: 'hallOfFame'},
					{name:"企业家",indexId: 'enterpriser'},
					{name:"创业家",indexId: 'entrepreneur'},
					{name:"至尊VIP",indexId: 'big'},
					{name:"金尊VIP",indexId: 'middle'},
					{name:"银尊VIP",indexId: 'small'},
					{name:"VIP",indexId: 'general'},
					{name:"注册用户",indexId: 'tourist'}
				],
				sortStr:[
					{name:"注册时间（倒序）",indexTime: 'timeDesc'},
					{name:"注册时间（正序）",indexTime: 'timeAsc'},
					{name:"累计积分",indexTime: 'point'},
					{name:"团队人数",indexTime: 'teamNum'},
					{name:"团队银尊VIP人数",indexTime: 'teamSmallNum'},
					{name:"团队金尊VIP人数",indexTime: 'teamMiddleNum'},
					{name:"团队至尊VIP人数",indexTime: 'teamBigNum'}
				],
			  indexId:"",
			  indexTime:""
			}
		},
		onLoad(options) {
			// console.log(options)
			if(options.fansFlag != '' && options.fansFlag != null && options.fansFlag != undefined){
				this.fansFlag = true
			}
			this.indexId = this.shuju[0].indexId;
			this.indexTime = this.sortStr[0].indexTime;
			this.myGroup(this.page,this.inputClearValue)
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.page=1;
			 this.list = [];
			this.myGroup(this.page,this.inputClearValue);
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		onReachBottom() {
			this.showLoadMore = true;
			if (this.page >= this.totalPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				setTimeout(() => {
					this.page++
					this.myGroup(this.page,this.inputClearValue);
				}, 300);
			}
		},
		methods: {
			//打开微信
			openWinXin(mobile){
				let that=this
			  uni.setClipboardData({
				data:mobile,
				success (res) {
				  uni.showToast({
					title: '复制成功',
					icon:"none"
				  })
				  that.openGoods()
				}
			  })
			  
			},
			//返回app
			openGoods() {
				const userStr = navigator.userAgent
				let that=this
				if (userStr.indexOf('Android') !== -1) {
				 let params={type:'openWeChat'}
				 window.Android.showInfoFromJs(JSON.stringify(params))
				} else {
				  webView.callhandler('openWeChat', {}, (data) => {
				  })
				}
			},
			//  拨打电话
			openPhone(){
				uni.makePhoneCall({
					phoneNumber: this.mobile,
					success(){
						console.log('调用成功')
					},
					fail(){
						console.log("调用失败")
					}
				})
			},
			//  打开电话弹窗
			openpopupPhone(areaCode,mobile){
				// this.areaCode = areaCode
				this.mobile = areaCode + mobile
				this.hidden = true
				this.popupFlag = 1
			},
			cancelPhone(){
				this.hidden = false
			},
			async myGroup(page,username){
				const token=uni.getStorageSync('token')
				// const token='eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtYvor5XpnLgiLCJhdWRpZW5jZSI6ImUxMGFkYzM5NDliYTU5YWJiZTU2ZTA1N2YyMGY4ODNlIiwidXNlcl9pZCI6NzA0NjQsImNyZWF0ZWQiOjE2Mzc2NTQwNTU1MDIsImV4cCI6MTY0MDI0NjA1NSwidXNlcl9ncm91cF9pZCI6bnVsbCwicGxhdGZvcm0iOm51bGx9.EpnGe5cM1IHYmUPC42LokChsE3AWwczUV6LFlADwLHrPGfpXAJYRRVMyTn0KvaF8Mwd-S8b6j8LlsRKRcEw56g'
					const [err, res] = await api.myGroup({
						query:{
							page:page,
							limit:10,
							keyword:username,
							memberType:this.memberType,
							sortStr:this.sortStrType
						},
						 header:{
							'Content-Type': 'application/json',
							'token': token
						 }
					 });
					 if(res.data.code == 0){
						 if(res.data.data.list!=null){
							this.list = [...this.list, ...res.data.data.list];
						 }
						  for(let i=0; i<this.list.length; i++){
							  let percentageInfo=Number(this.list[i].oneselfShipment)/Number(this.list[i].promotionNeedAmount)
							  this.list[i].percentage=percentageInfo*100
						  }
						 this.totalPage=res.data.data.totalPage
						 if(this.list.length==0){
							 this.loadMoreText = "暂无数据!"
							 this.showLoadMore = true;
						 }else{
							this.showLoadMore = false; 
						 }
					 }else{
						 uni.showToast({
							title: res.data.msg,
							icon: 'none'
						 })
						if(res.data.code==200){
							uni.removeStorageSync('token');
							setTimeout(() => {
								uni.reLaunch({
								  url: "/pages/login/loginWechat"
								})
							}, 1000);
						}	
					 }
			},
			clearInput: function(event) {
				this.inputClearValue = event.target.value;
				if (event.target.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			//搜索
			seek(){
				this.page=1;
				 this.list = [];
				this.myGroup(this.page,this.inputClearValue);
			},
			// //注册时间
			// timeZc(){
			// 	this.page=1;
			// 	this.list = [];
			// 	if(this.sidxShou == false){
			// 		this.sidx='time';//按时间排序 
			// 		this.order='ascending';//正序
			// 		this.myGroup(this.page,this.inputClearValue);
			// 		this.sidxShou=true;
			// 	}else{
			// 		this.sidx='time';//按时间排序 
			// 		this.order='descending';
			// 		this.myGroup(this.page,this.inputClearValue);
			// 		this.sidxShou=false;
			// 	}
			// },
			//数量排序
			// timeFs(){
			// 	this.page=1;
			// 	this.list = [];
			// 	console.log(this.sidxShou)
			// 	if(this.orderShou == false){
			// 		this.sidx='count';//按总数排序
			// 		this.order='ascending';
			// 		this.myGroup(this.page,this.inputClearValue);
			// 		this.orderShou=true;
			// 	}else{
			// 		this.sidx='count';//按总数排序
			// 		this.order='descending';
			// 		this.myGroup(this.page,this.inputClearValue);
			// 		this.orderShou=false;
			// 	}
			// },
			getCouponSelected(){
				this.memberType=this.indexId
				this.page=1;
				this.list = [];
				this.myGroup(this.page,this.inputClearValue)
			},
			//排序
			getCouponSelectedOne(){
				this.sortStrType=this.indexTime
				this.page=1;
				this.list = [];
				this.myGroup(this.page,this.inputClearValue)
			},
			fans(id){
				if(this.fansFlag == true){
					uni.navigateTo({
					  url: "/pages/myGroupInfo/myGroupInfo?id="+id + '&fansFlag=' + this.fansFlag
					})
				}else{
					uni.navigateTo({
					  url: "/pages/myGroupInfo/myGroupInfo?id="+id
					})
				}
				
			}
		}
	}
</script>
